<template>
    <div>
        
        <el-card style="height: 350px;max-width: 600px;margin: 280px auto;background-color:#F0F8FF; ">
            <tr>
                <td><div style="font-size: large;color:#6495ED;">欢迎登录WMS仓库系统</div></td>
                <td><router-link to="" style="font-size: small;color:#6495ED;margin-left: 10px;">产品背景</router-link></td>
            </tr>
            
            <el-form ref="ruleFormRef" style="max-width: 600px;margin: 80px 60px;" :model="ruleForm" :rules="rules"
                label-width="auto">
                <el-form-item label="账号" prop="name" style="margin: 40px 65px auto 65px;">
                    <el-input style="width: 230px;" v-model="ruleForm.name" />
                </el-form-item>

                <el-form-item label="密码" prop="pwd" style="margin:  15px 65px 30px 65px;">
                    <el-input style="width: 230px;" v-model="ruleForm.pwd" />
                </el-form-item>

                <el-form-item style="margin: auto 150px;">
                    <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
                    &#160&#160
                    <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                </el-form-item>

            </el-form>
<div style="margin: -50px 130px;">
    测试用户账号：admin
    密码：admin123
</div>
        </el-card>
    </div>
</template>


<script lang="ts" setup>
import { reactive, ref } from 'vue'

import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
import axios from 'axios'
import router from '@/router'
import { useCounterStore } from '@/stores/counter'



const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    name: '',
    pwd: '',
})


const rules = reactive<FormRules>({
    name: [
        { required: true, message: '请输入账号！', trigger: 'blur' },
    ],
    pwd: [
        { required: true, message: '请输入密码！', trigger: 'blur' },
    ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            axios.post("api/app/user/login?UserNameOrEmail="+ruleForm.name+"&Pwd="+ruleForm.pwd).then(res=>{
                if(res.data.code==200)
                {
                    ElMessage.success(res.data.message)
                    const a=useCounterStore();
                    a.islogin=true
                    a.username=res.data.data.userName;
                    a.userid=res.data.data.id;
                    a.rolename=res.data.data.roleName;
                    router.push("home")
                }
                else
                {
                    ElMessage.error(res.data.message)
                }
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`,
}))
</script>

<style></style>